<template>
  <div v-loading="loading">
    <el-table
      class="marginTop10"
      :data="tableDatas.tableDatasAfterPage"
      stripe
      border
      empty-text="无数据"
    >
      <el-table-column
        v-for="column in tableDatas.tableColumns"
        :prop="column.prop"
        :label="column.label"
        :align="column.align"
        :width="column.width"
      >
        <template
          #default="scope"
          v-if="column.prop =='operate'"
        >
          <!-- 已通过状态可以存档 -->
          <div v-show="[2].includes(scope.row.STATE)">
            <el-button
              type="success"
              @click="tableDatas.editBtnClick(scope.row)"
            >已补卡</el-button>
          </div>
        </template>
        <template
          #default="scope"
          v-if="column.prop =='STATE'"
        >

          <el-tag :type="formOptions.STATE[scope.row['STATE']].type">
            {{ formOptions.STATE[scope.row['STATE']].text }}
          </el-tag>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="marginTop10"
      @size-change="tableDatas.filters.handleSizeChange"
      @current-change="tableDatas.filters.handleCurrentChange"
      :page-sizes="[10, 15, 20, 100]"
      :page-size="tableDatas.filters.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDatas.tableDatasAfterFilter.length"
    >
    </el-pagination>

  </div>
</template>
<script>
import { computed, reactive, ref } from 'vue';
import { onMounted, watch } from '@vue/runtime-core';
import VueCookie from 'vue-cookie';
import store from '@/store';

import myAxios from '@/myAxios/myAxios';
import { dayjs } from 'element-plus';

export default {
  name: 'HomeSPTGView',
  setup () {
    let userid = VueCookie.get('userid');

    let loading = ref(false);
    let departmentOptions = store.state.departmentOptions;


    let getTableDatas = function () {
      loading.value = true;
      let params = `\t${2}\t`;
      myAxios.get('陈帅廷查询智联补卡记录', params).then(res => {
        if (res instanceof Array) {
          loading.value = false;
          tableDatas.oritableData = [...res];
          ElMessage({
            type: 'success',
            message: '最新数据获取成功!'
          });
        }
        else {
          loading.value = false;
          ElMessageBox({
            title: '警告',
            type: 'warning',
            message: '获取数据失败res!' + res
          });
        }
      }).catch((err) => {
        loading.value = false;
        ElMessageBox({
          title: '警告',
          type: 'warning',
          message: '获取数据失败err!' + err
        });
      });
    };

    onMounted(() => {
      getTableDatas();
    });

    let tableDatas = reactive({
      //表格筛选展示相关代码
      filters: {

        //表格翻页相关代码
        currentPage: 1,
        pagesize: 10,
        handleSizeChange (val) {
          tableDatas.filters.pagesize = val;
        },
        handleCurrentChange (val) {
          tableDatas.filters.currentPage = val;
        },
      },
      tableDatasAfterFilter: computed(() => {
        let fData = tableDatas.oritableData;
        return fData;
      }),
      tableDatasAfterPage: computed(() => {
        let fData = tableDatas.tableDatasAfterFilter;
        fData = fData.slice((tableDatas.filters.currentPage - 1) * tableDatas.filters.pagesize, tableDatas.filters.currentPage * tableDatas.filters.pagesize);
        return fData;
      }),

      tableColumns: [
        {
          "prop": "CREATER_ID",
          "label": "申请人工号",
          "align": "center"
        },
        {
          "prop": "USERNAME",
          "label": "申请人",
          "align": "center"
        },
        {
          "prop": "RECLOCK_DATE",
          "label": "补卡日期",
          "align": "center"
        },
        {
          "prop": "RECLOCK_REASON",
          "label": "未打卡原因",
          "align": "center"
        },
        {
          "prop": "CHECK_ID",
          "label": "审批人工号",
          "align": "center"
        },
        {
          "prop": "CREATE_TIME",
          "label": "创建时间",
          "align": "center"
        },
        {
          "prop": "STATE",
          "label": "状态",
          "align": "center",
          "width": 110
        },
        {
          "prop": "RETURN_REASON",
          "label": "退回原因",
          "align": "center"
        },
        {
          "prop": "operate",
          "label": "操作",
          "align": "center",
          "width": 170
        }
      ],
      oritableData: [],
      editBtnClick: function (row) {

        loading.value = true;

        let params = `${row.CREATER_ID}\t${row.RECLOCK_DATE}\t${row.RECLOCK_REASON}`
          + `\t${row.CHECK_ID}\t${row.CREATE_TIME}\t${row.CHECK_TIME}`
          + `\t${4}\t${dayjs().format('YYYY/MM/DD HH:mm:ss')}\t${row.RETURN_REASON}`;

        myAxios.post('陈帅廷新增或修改智联补卡记录', params).then(res => {
          if (res.includes('成功')) {

            let index = tableDatas.oritableData.indexOf(row);
            tableDatas.oritableData.splice(index, 1);
            loading.value = false;
            ElMessage({
              type: 'success',
              message: '操作成功!' + res
            });
            getTableDatas();
          }
          else {
            loading.value = false;
            ElMessageBox({
              title: '警告',
              type: 'warning',
              message: '操作失败res!' + res
            });
          }
        }).catch((err) => {
          loading.value = false;
          ElMessageBox({
            title: '警告',
            type: 'warning',
            message: '操作失败err!' + err
          });
        });
      },
    });

    let formOptions = {
      "STATE": [
        {
          type: 'info',
          text: '新建',
        },
        {
          type: '',
          text: '提交',
        },
        {
          type: 'success',
          text: '审批通过',
        },
        {
          type: 'danger',
          text: '审批不通过',
        },
        {
          type: 'success',
          text: '已完成',
        },
      ]
    };
    return {
      userid,
      departmentOptions,
      loading,
      tableDatas,
      formOptions,
    };
  }
}
</script>
<style lang="css" scope>
.marginTop10 {
  margin-top: 10px;
}
</style>

